<?php
include_once ("geocoder.php");
include ("header.php");
?>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry,places&sensor=false" /></script>
<script type="text/javascript" src="jscripts/jquery.mapFunctions.js" /></script>
<script type="text/javascript" />
	$(document).ready(function(e) {
		// Get and display categories
		var category = $("#categories");
		var selectAll = $("#select-all");
		var clear = $("#clear");
		var radius = $("#radius");
		var selections = [];
		
		category.select2({
			width:"element",
			placeholder: "Please select a category",
			allowClear: true});
		
		radius.select2({
			width:"element",
			allowClear: false});
		
		$("#categories option").each(function() {
            selections.push($(this).val());
        });
		
		category.select2("val", selections);
		
		selectAll.click(function() {
			toggleVisible(selections);
			category.select2("val", selections);
		});
		
		clear.click(function() {
			toggleVisible([]);
			category.select2("val", "");
		});
		
		category.on("change", function(e) {toggleVisible(e.val)});
	});
</script>
<div id="map_wrapper">
	<div id="category-selection">
        <input id="select-all"  class="button huge no-margin" type="button" value="Select All" />
        <input id="clear"  class="button huge no-margin" type="button" value="Clear" />
        <select id="categories" multiple="multiple" >
        <?php
            /*$sql = $database->getCategories();
            $count = $sql->rowCount();
            for($i = 0; $i < $count; $i++)
            {
                $result = $sql->fetch();
                echo "<option value='".$result["categoryID"]."'>".$result["categoryName"]."</option>";
            }*/?>
            <option value="farm">Farm</option>
            <option value="farmers_market">Farmer's Market</option>
            <option value="community_garden">Community Garden</option>
            <option value="orchards">Orchard</option>
            <option value="csa">CSA</option>
            <option value="other">Other</option>
        </select>
    </div>
    <div id="map_canvas"></div>
    <div id="location-service">
    	<div id="searchbar">
            <input id="address" type="text" class="location-input" placeholder="Please enter a location and select a search radius (in mile) to start searching" />
            <select id="radius" >
                <option value="1">1</option>
                <option value="5">5</option>
                <option value="10">10</option>
                <option value="20">20</option>
                <option value="30">30</option>
                <option value="40">40</option>
                <option value="50">50</option>
            </select>
            <input type="button" class="button huge no-margin no-float" onclick="FindClosest()" value="Locate" />
        </div>
        <div id="results"></div>
    </div>
</div>

<?php
include ("footer.php");
?>

